<template>
	<div>
		<header>
			<i class="iconfont icon-xiangzuo1" @click="goPrev"></i
			><span>生成条形码</span
			><i class="iconfont icon-shanguangdeng" @click="flashOpenOrClose"></i
			><i class="iconfont closeScan" @click="closeScan">关闭</i>
		</header>
		<div class="common-box">
            <div class="content-box">
                <v-scan
                @scanData="scanData"
                ref="ch"
                :switchScan="switchScan"
                :loadingData="loadingData"
                ></v-scan>
            </div>
		</div>
		<div class="order-list">
			<p style="font-size: 16px">当前打印机： {{printerName}}</P>
            <p style="font-size: 16px">内容显示：</p>
            <div class="_qrcode" >
                <canvas id="canvascode"></canvas>
            </div>
		</div>
		<div class="footer-btn" @click="confirmEnter">打印</div>

		<div class="footer-btn2" @click="reconnectLanYa">重新连接</div>
	</div>
</template>
<script>
  import Scan from '@/components/ContinuousScan';
  import Header from '@/components/header' 
	import $ from "jquery"
	import Vue from 'vue'; 
	// 二维码
	import QRCode from 'qrcodejs2'  
	// 条形码
	var JsBarcode = require('jsbarcode')
	export default {
		name: 'GenerateBarCode',
		components: {
			'v-scan': Scan,
      'v-header': Header,
      QRCode
		},
		data() {
			return {
				labelNo: '',
				loadingData: false,
				switchScan: true,
				printerName: ''
			}
		},
		watch: {
		},
		mounted() {
		},
		created() {
      		window.LanYaMac = this.LanYaMac;
			let obj = {
				...JSON.parse(localStorage.getItem('labelMac')),
				type: 'label'
			}
			if (localStorage.getItem('labelMac')) {
				this.printerName = JSON.parse(localStorage.getItem('labelMac')).name 
			}
			setTimeout(() => {
				CallAndroidOrIOS.ReconnectLanYa(JSON.stringify(obj));
			}, 500)
		},
		methods: { 
			scanData(data) {
                let that = this
				this.labelNo = data
                this.$nextTick (function () {
                    var canvas = document.getElementById("canvascode");
                    JsBarcode(canvas, data,{
                        format: "CODE128",
                        displayValue: 1,
                        fontSize: 20,
                        lineColor: "#000",
                    })
                })
			},
			confirmEnter () { 
				if (this.labelNo) { 
					CallAndroidOrIOS.LogBarCode(this.labelNo);
				} 
			}, 
			reconnectLanYa () {
				let obj = {
					type: 'label',
					mac: '',
				}
				CallAndroidOrIOS.ReconnectLanYa(JSON.stringify(obj));
			},
			LanYaMac(name, mac) {
				let obj = {
					name,
					mac
				}
				this.printerName = name
				localStorage.setItem('labelMac', JSON.stringify(obj));
			},
			// 关闭扫描框
			closeScan() {
                // 安卓
                try {
                    CallAndroidOrIOS.CancelScan();
                } catch (error) {}
                // 苹果
                try {
                    window.webkit.messageHandlers.messageSend.postMessage({
                    a: "离开app原生半屏扫描二维码/条码",
                    });
                } catch (error) {}
			},
			//打开或关闭 闪光灯
			flashOpenOrClose() {
                let that = this;
                // 安卓
                try {
                    if (that.ifflash) {
                    CallAndroidOrIOS.setTorchEnabled_false(); // setTorchEnabled_false  闪光灯 关闭
                    that.ifflash = false;
                    } else {
                    CallAndroidOrIOS.setTorchEnabled_true(); // setTorchEnabled_true  闪光灯 打开
                    that.ifflash = true;
                    }
                } catch (error) {}
                // 苹果
                try {
                    window.webkit.messageHandlers.messageSend.postMessage({
                    a: '打开或关闭闪光灯',
                    });
                } catch (error) {}
			},
			// 关闭扫码框
			CloseScanBox() {
                // 安卓
                try {
                    CallAndroidOrIOS.CancelScan();
                } catch (error) {}
                // 苹果
                try {
                    window.webkit.messageHandlers.messageSend.postMessage({
                    a: '离开app原生半屏扫描二维码/条码',
                    });
                } catch (error) {}
			},
			goPrev() {
				this.closeScan()
				this.$router.go(-1);
			},
			switchScanFun(data) {
				if (data) {
				this.switchScan = true // 打开摄像头
				} else {
				this.switchScan = false // 关闭摄像头
				}
			},
			uploadOnChange(file) {
				this.switchScanFun(true); // 打开摄像头
			}
    	},
  		beforeDestroy () {
			this.closeScan()
  		}
  }
</script>
<style scoped lang="less">
	// @import "../../components/publicLess.less";
	.common-box {
		height: 100%;
	}
    ._qrcode {
        display: flex;
        justify-content: center;
        border: 1px solid #e1e1e1;
        margin-top: 10px
    }
	.order-list {
		margin: 10px;
		div {
			font-size: 22px;
			span {
				color: #6f7180;
			}
		}
	}
    
		// #canvascode{
        //     // top:480px;
        //     // left: 50%;
        //     margin-top: 100px;
        //     margin:0/50rem auto 100/50rem;
        //     display: block;
        //     // position: fixed;
        //     width:600/50rem;
        //     height: 200/50rem;
        // }
	.footer-btn {
		position: fixed;
		bottom: 20px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		border-radius: 5px;
		width: 80%;
		background-color: #038EEA;
		color: #fff;
		margin-left: 10%;
	}
	.footer-btn2 {
		position: fixed;
		bottom: 100px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		border-radius: 5px;
		width: 80%;
		background-color: #038EEA;
		color: #fff;
		margin-left: 10%;
	}
</style>